<template>
   <!--放html代码的，只能有一个根标签-->
    <div>
        <el-card class="box-card">
            <h2>用户登录</h2>
            <el-form :model="user" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <span style="color:red">{{msg}}</span>
                <el-form-item label="账号" prop="username">
                    <el-input type="text" v-model="user.username"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="user.password"></el-input>
                </el-form-item>
                <el-button type="primary" v-on:click="login()">登录</el-button>
            </el-form>
<!--            <el-button v-on:click="testGet()">测试接口</el-button>-->
        </el-card>
    </div>
</template>

<script>
    export default {
        name: "LoginView",
        data(){  // 数据定义
            return {
                user:{ //用户对象
                    username:"admin",
                    password:"123"
                },
                msg:"", //错误信息
                rules:{
                    username:[{required:true,message:'请填写账号',trigger:'blur'}],
                    password:[{required:true,message:'请填写密码',trigger:'blur'}]
                }
            }
        },
        methods:{
            //登录
            login(){
                console.log(this.qs.stringify(this.user));
                //使用axios向/login后台发送一个post请求
                this.axios.post("/login",
                    this.qs.stringify(this.user))
                    .then(result => {
                        console.log("返回结果：" + JSON.stringify(result));
                        if(result.data.status == "OK"){
                            //把两个token保存到本地
                            localStorage.setItem("access-token",result.data.accessToken);
                            localStorage.setItem("refresh-token",result.data.refreshToken);
                            //跳转到权限管理
                            this.$router.push({path:'/main',query:{username:result.data.data}});
                        }
                    })
                    .catch(err => {
                        console.log("出现错误：" + JSON.stringify(err));
                    });
            }
        }
    }
</script>

<style scoped>
    .text {
        font-size: 14px;
    }

    .item {
        padding: 18px 0;
    }

    .box-card {
        width: 480px;
        margin: 200px auto;
    }
</style>
